<template>

  <div class="login">
  <h1>后台管理系统</h1>
    <el-form label-width="100px" class="demo-ruleForm">
      <el-form-item label="账号">
        <el-input type="password" size="min" v-model="user.account"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">提交</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
      <li>超级管理员账户：yuan；密码：123456</li>
      <li>管理员账户：admin；密码：123456</li>
      <li>普通用户账户：yonghu；密码：123456</li>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        account: "",
        password: "",
      },
    };
  },
  methods: {
    login() {
       // 判断输入是否为空
      if (this.user.account == "" || this.user.password == "") {
        this.$message({
          type: "error",
          message: "账号或密码不能为空！",
        });
        return;
      }
      this.$http.get(`/user?account=${this.user.account}`).then(
        (res) => {
          if (res.statusText == "OK" && res.status == 200) {
            // console.log(res.data)
            var { account, password, permissions, name } = res.data[0];
            console.log(res.data[0]);
            console.log(account, password);
            if (
              this.user.account == account &&
              this.user.password == password
            ) {
              // 缓存本地账户信息
              sessionStorage.setItem("account", account);
              // 缓存本地账户名
              sessionStorage.setItem("name", name);
              // 缓存权限信息
              sessionStorage.setItem("permissions", permissions);
              // 权限判断
              if (permissions == 2) {
                this.$message({
                  type: "success",
                  message: "权限不够！无法登陆...",
                });
                return false;
              }
              // 并跳转到首页
              this.$router.push("/Home");
              console.log(account, password);
            }
          }
        },
        (err) => {
          console.log("请求出错！", err);
        }
      );
    },
    reset(){
      this.user.account = ""
      this.user.password = ""
    }
  },
};
</script>
<style scoped>
.el-input {
  width: 300px;
  
}
.login{
  width: 400px;
  height: auto;
    margin: 160px auto;
    padding: 30px;
}
li{
 text-align: center;
}
h1{
  text-align: center;
  margin: 10px 0px;
}
</style>